<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrapper {
            width: 600px;
            margin: 50px auto;
        }

        .wrapper .nav {
            display: flex;
        }

        .wrapper .nav li {
            text-align: center;
            line-height: 40px;
            flex: 1;
            border: 1px solid #333;
        }

        .wrapper .nav li+li {
            border-left: 0;
        }

        .part {
            margin-top: 10px;
        }

        .comp-a,
        .comp-b,
        .comp-c,
        .comp-d {
            border: 1px solid #333;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrapper">
            展示组件:{{compName}}
            <ul class="nav">
                <li @click="compName='comp-a'">组件A</li>
                <li @click="compName='comp-b'">组件B</li>
                <li @click="compName='comp-c'">组件C</li>
                <li @click="compName='comp-d'">组件D</li>
            </ul>
            <div class="part">
                <!-- <comp-a v-if="compName == 'comp-a'"></comp-a>
                <comp-b v-if="compName == 'comp-b'"></comp-b>
                <comp-c v-if="compName == 'comp-c'"></comp-c>
                <comp-d v-if="compName == 'comp-d'"></comp-d> -->

                <!-- 静态属性 -->
                <!-- <component is="comp-a"></component>
                <component is="CompB"></component>
                <component is="comp-c"></component>
                <component is="comp-d"></component> -->

                <!-- 动态属性 -> 展示的组件会根据传入的数据改变而改变 -->
                <component :is="compName"></component>
            </div>
        </div>
    </div>

</body>
<script>

    // component 系统内置组件,可以对应组件名称渲染某个组件
    // 

    let CompA = {
        // name: "count-down",
        data: function () {
            return {
                countTime: 100,  //倒计时的时间(s)
                timer: null,
            }
        },
        template: `<div class="comp-a count-down">
            {{beauty(hour)}}:{{beauty(min)}}:{{beauty(sec)}}
        </div>`,
        methods: {
            beauty(num) {
                return num < 10 ? "0" + num : num;
            },
            countDownHandler() {
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.countTime--;
                    // console.log(this.countTime);
                }, 1000)
            }
        },
        computed: {
            // 将倒计时的时间换算为天时分秒
            day: function () {
                return parseInt(this.countTime / (24 * 60 * 60));
            },
            hour: function () {
                // 总的时间 % 一天的时间 =>  不满一天的时间
                // 不满一天的时间 / 一小时
                return parseInt(this.countTime % (24 * 60 * 60) / (60 * 60))
            },
            min: function () {
                // 不满一小时 / 一分钟
                return parseInt(this.countTime % (60 * 60) / 60);
            },
            sec: function () {
                // 不满一小时 / 一分钟
                return this.countTime % 60;
            },
        },
        mounted() {
            this.countDownHandler();
            console.log("组件A挂载完毕");
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        destroyed() {
            console.log("组件A卸载完毕");
        },
    }

    let CompB = {
        data() {
            return {
                count: 1,
            }
        },
        template: `<div class="comp-b">
            <p>{{count}}</p>
            <button @click="count++">count++</button>
        </div>`,
        mounted() {
            console.log("组件B挂载完毕");
        },
        destroyed() {
            console.log("组件B卸载完毕");
        },
    }

    let CompC = {
        data() {
            return {
                count: 1,
            }
        },
        template: `<div class="comp-c">
            <p>这是组件C:{{count}}</p>
            <button @click="count++">count++</button>
        </div>`,
        mounted() {
            console.log("组件C挂载完毕");
        },
        destroyed() {
            console.log("组件C卸载完毕");
        },
    }

    let CompD = {
        data() {
            return {
            }
        },
        template: `<div class="comp-d">
            <p>这是组件D:</p>
        </div>`,
        mounted() {
            console.log("组件D挂载完毕");
        },
        destroyed() {
            console.log("组件D卸载完毕");
        },
    }



    var app = new Vue({
        el: "#app",
        data: {
            compName: "comp-a",
        },
        components: {
            CompA,
            CompB,
            CompC,
            CompD,
        }
    })


</script>

</html>